<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            float: left;
            margin: 0;
            padding: 0;
            width: 381px;
        }

        .head {
            float: left;
            width: 381px;
            height: 45px;
            border: 1px solid white;

        }

        input {
            float: left;
            width: 327px;
            height: 26px;
            margin-top: 8px;
            margin-left: 5px;
            background-image: url(./img/携程旅游大杂烩.png);
            background-repeat: no-repeat;
            background-position: -109px -520px;
            background-size: 194px;
            border-radius: 5px;
            box-shadow: 2px 6px 12px gray;
            border: 0px;

        }

        .Me {
            float: right;
            width: 41px;
            height: 26px;
            margin-top: 3px;
            background-image: url(./img/携程旅游大杂烩.png);
            background-repeat: no-repeat;
            background-position: -60px -221px;
            background-size: 119px;
        }

        .Tou {
            float: right;
        }

        .Me a {
            float: right;
            font-size: 12px;
            margin-top: 25px;
            margin-right: 7px;
            text-decoration: none;
            color: rgb(25, 151, 200);
        }


        .pic {
            float: left;
            width: 381px;
            height: 78px;
            border: 1px solid white;
            background-image: url(./img/走秀.jpg);
            background-size: 383px;
        }

        .menu {

            width: 381px;
            height: 70px;
            border: 1px solid white;
            display: flex;
            border-radius: 20px;
        }

        [class ^='mm'] {
            height: 40px;
            width: 76px;
        }

        [class ^='hh'] {
            width: 40px;
            height: 40px;
            margin-top: 4px;
            margin-left: 17px;

            background-image: url(./img/携程旅游导航栏.png);
            background-repeat: no-repeat;
            background-size: 39px;
        }

        .menu a {
            color: black;
            text-decoration: none;
            font-size: 15px;
            margin-left: 4px;

        }


        .hh1 {
            background-position: 1px 1px;
        }

        .hh2 {
            background-position: 1px -38.5px;
        }

        .hh3 {
            background-position: 1px -77.5px;
        }

        .hh4 {
            background-position: 1px -117px;
        }

        .hh5 {
            background-position: 1px -156px;
        }

        [class^=hotel] {
            float: left;
            width: 381px;
            height: 92px;
            border: 1px solid;

            font-size: 16px;
            color: white;
            text-align: center;
            /* margin-top: 5px; */
        }

        [class^=dd1] {
            float: left;
            width: 125px;
            height: 90px;
            border: 1px solid white;
            background-image: url(./图片/酒店.png);
            background-position: 0px 42px;
            background-repeat: no-repeat;
            background-size: 125px;
        }

        .hotel1 {
            border-radius: 20px 20px 0px 0px;
            background-image: linear-gradient(to right, rgb(250, 91, 86), rgb(251, 149, 78));
        }

        .hotel2 {
            background-image: linear-gradient(to right, rgb(76, 147, 236), rgb(83, 186, 237));
        }

        .hotel3 {
            border-radius: 0px 0px 20px 20px;
            background-image: linear-gradient(to right, rgb(58, 196, 166), rgb(105, 211, 95));
        }

        [class^=hotel] span {
            display: block;
            margin-top: 12px;
        }

        [class^=d1] {
            float: left;
            width: 125px;
            height: 45px;
            border: 1px solid white;
        }

        .x1 {
            float: left;
            width: 125px;
            height: 45px;
            border: 1px solid white;

        }

        .wifi {
            float: left;
            width: 381px;
            height: 120px;
            border: 1px solid white;
            border-radius: 20px;
        }

        .wifi div {
            width: 74px;
            height: 45px;
            float: left;
            background-image: url(./img/WIFI.png);
            background-repeat: no-repeat;
            background-position: 23px 5px;
            background-size: 38px;
            margin-top: 5px;
        }

        .wifi span {
            display: block;
            margin-top: 33px;
            margin-left: 20px;
            color: black;

        }

        .active {
            float: left;
            width: 381px;
            height: 60px;
            border: 1px solid white;
            background-color: white;

        }

        .active1 {
            float: left;
            width: 100px;
            height: 40px;
            background-image: url(./img/热门活动.png);
            background-position: 8px -20px;
            background-repeat: no-repeat;
            margin-top: 17px;
            background-size: 94px;
        }

        .active span {
            float: right;
            display: block;
            width: 128px;
            height: 24px;
            text-align: center;
            border-radius: 20px;
            color: white;
            background-image: linear-gradient(to right, rgb(248, 86, 116), rgb(252, 106, 183));
            margin-top: 18px;
        }

        .div1 {
            float: left;
            width: 381px;
            height: 140px;
            border: 1px solid white;

        }

        .div1 .left {
            float: left;
            width: 197px;
            height: 134px;
            background-image: url(./img/美丽乡村.jpg);
            background-repeat: no-repeat;
            background-size: 197px;
            margin-top: 2px;
        }
        .div1 .right{
            float: right;
            width: 184px;
            height: 132px;
            background-image: url(./img/高铁.jpg);
            background-repeat: no-repeat;
            background-size: 197px;
            margin-top: 2px;
        }
        .div2 {
            float: left;
            width: 381px;
            height: 90px;
            border: 1px solid white;
        }
        .div2 .left {
            float: left;
            width: 197px;
            height: 134px;
            background-image: url(./img/购定制游赠.jpg);
            background-repeat: no-repeat;
            background-size: 197px;
            margin-top: 2px;
        }
        .div2 .right{
            float: right;
            width: 184px;
            height: 132px;
            background-image: url(./img/领券中心.jpg);
            background-repeat: no-repeat;
            background-size: 197px;
            margin-top: 2px;
        }

        .div3 {
            float: left;
            width: 381px;
            height: 90px;
            border: 1px solid white;
        }
        .div3 .left {
            float: left;
            width: 197px;
            height: 134px;
            background-image: url(./img/会员福利.jpg);
            background-repeat: no-repeat;
            background-size: 197px;
            margin-top: 2px;
        }
        .div3 .right{
            float: right;
            width: 184px;
            height: 132px;
            background-image: url(./img/携程优品商城.jpg);
            background-repeat: no-repeat;
            background-size: 197px;
            margin-top: 2px;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- 头部 -->
        <div class="head">
            <div class="ShuRuKuang">
                <div class="SouSuo"></div>
                <input type="text" placeholder="        搜索：目的地/酒店/景点/航班号">
            </div>
            <div class="Me">
                <div class="Tou"></div>
                <a href="">我的</a>
            </div>
        </div>
        <!-- 图片 -->
        <div class="pic"></div>
        <!-- 菜单栏 -->
        <div class="menu">
            <div class="mm1">
                <div class="hh1"></div>
                <a href="#">景点•玩乐</a>
            </div>
            <div class="mm2">
                <div class="hh2"></div>
                <a href="#">景点•玩乐</a>
            </div>
            <div class="mm3">
                <div class="hh3"></div>
                <a href="#">景点•玩乐</a>
            </div>
            <div class="mm4">
                <div class="hh4"></div>
                <a href="#">景点•玩乐</a>
            </div>
            <div class="mm5">
                <div class="hh5"></div>
                <a href="#">景点•玩乐</a>
            </div>
        </div>
        <!-- 酒店1 -->
        <div class="hotel1">
            <div class="dd1">
                <span>海外酒店</span>
            </div>
            <div class="d1"><span>海外酒店</span></div>
            <div class="x1"><span>海外酒店</span></div>
            <div class="d1"><span>特价酒店</span></div>
            <div class="d1 "><span>特价酒店</span></div>
        </div>
        <!-- 酒店2 -->
        <div class="hotel2">
            <div class="dd1">
                <span>海外酒店</span>
            </div>
            <div class="d1"><span>海外酒店</span></div>
            <div class="d1"><span>海外酒店</span></div>
            <div class="d1"><span>特价酒店</span></div>
            <div class="d1"><span>特价酒店</span></div>
        </div>
        <!-- 酒店3 -->
        <div class="hotel3">
            <div class="dd1">
                <span>海外酒店</span>
            </div>
            <div class="d1"><span>海外酒店</span></div>
            <div class="d1"><span>海外酒店</span></div>
            <div class="d1"><span>特价酒店</span></div>
            <div class="d1"><span>特价酒店</span></div>
        </div>
        <!-- wifi -->
        <div class="wifi">
            <div><span>电话费</span></div>
            <div><span>电话费</span></div>
            <div><span>电话费</span></div>
            <div><span>电话费</span></div>
            <div><span>电话费</span></div>
            <div><span>电话费</span></div>
            <div><span>电话费</span></div>
            <div><span>电话费</span></div>
            <div><span>电话费</span></div>
            <div><span>电话费</span></div>
        </div>
        <!-- 活动 -->
        <div class="active">
            <div class="active1"></div>
            <SPAN>获得更多福利 ></SPAN>
        </div>

        <div class="div1">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="div2">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="div3">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>
</body>
</html>